<div ng-controller="SearchCtrl" class="searchdiv">

    <div class="input-group search">
        <input type="text" class="form-control" ng-model="keyword">
        <span class="input-group-btn">
            <button class="btn btn-default" type="button" ng-click="search()">Go!</button>
        </span>
    </div>
    <br />
    <div class="search">
        <div class="search-options" style="padding:0px">
            <h4>Search in</h4>
        </div>
        <div style="float:left">
            <input ng-model="type" type="radio" name="searchOptions" value="0" style="width:50px"> Title
            <br/>
            <input ng-model="type" type="radio" name="searchOptions" value="1" style="width:50px"> Topic
            <br/>
            <input ng-model="type" type="radio" name="searchOptions" value="2" style="width:50px"> Summary
            <br/>
            <input ng-model="type" type="radio" name="searchOptions" value="3" style="width:50px"> Annotation
        </div>
    </div>

    <div ng-show="search_results !== null" class="search-results">
        <h4>Search Results for {{searched_keyword}}</h4>
        <div ng-show="search_results.length > 0" >
            <div ng-repeat="video in search_results track by $index" class="video-container">
                <img ng-src="{{posterURL(video)}}" alt="video" class="thumbnail" ng-click="watch(video)"/>
                <div>
                    <div class="video-title">{{getShowName(video.title, 25)}}</div>
                    <div class="video-metadata">
                        about <span style="font-weight:bold">{{video.topic}}</span>
                        <div class="video-right" ng-show="disliked(video, true)">
                            <label class="label label-danger"><span class="glyphicon glyphicon-thumbs-down"></span> You disliked this!</label>
                        </div>
                        <div class="video-right" ng-show="liked(video, true)">
                            <label class="label label-success"><span class="glyphicon glyphicon-thumbs-up"></span> You liked this!</label>
                        </div>
                    </div>
                </div>
                <br ng-show="($index + 1) % 4 === 0" />
            </div>
        </div>
        <div ng-show="search_results.length === 0">
            No results found
        </div>
    </div>

</div>